﻿@model String
@{
    var guid = Guid.NewGuid().ToString();
}
<script src="/CommonRoot/js/file-upload.js"></script>
<div id="d-@guid">
    <div class="input-group">
        <input type="text" class="form-control" autocomplete="off" v-model="pictureUrl" />
        <input type="file" id="@guid-file-input" @@change="onFileInputChange" style="display:none;" accept="image/*" />
        <span class="input-group-addon" v-if="realPictureUrl" @@click="$('#@guid-modal').modal('show')" style="cursor:pointer;">预览</span>
        <span class="input-group-addon" @@click="onSelectBtnClick" style="cursor:pointer;">选择</span>
    </div>
    <div class="modal fade" tabindex="-1" role="dialog" id="@guid-modal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="panel-default">
                    <div class="panel-heading">上传图片</div>
                    <div class="panel-body" style="text-align:center; min-height:325px;">
                        <img v-if="realPictureUrl" :src="realPictureUrl" style="max-height:325px;max-width:360px;"/>
                    </div>
                    <div class="panel-footer clearfix">
                        <div class="pull-right">
                            <button class="btn btn-default" type="button" @@click="$('#@guid-file-input').click()">重新上传</button>
                            <button class="btn btn-primary" type="button" @@click="$('#@guid-modal').modal('hide')">确 定</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@Html.Hidden("", Model, new { id = guid + "-val" })

<script>
    new Vue({
        el: '#d-@guid',
        data: {
            pictureUrl: '@Model',
            realPictureUrl: '@Model'
        },
        methods: {
            onSelectBtnClick: function () {
                $('#@guid-file-input').click();
            },
            onFileInputChange: function () {
                var fileInput = arguments[0].target;
                if (!fileInput.files.length) return;

                $('#@guid-modal').modal('show');

                var vm = this;
                var uploader = new FileUpload({ url: '/cms/article/uploadPicture' }, fileInput.files[0]);
                uploader.upload(function (res) {
                    vm.pictureUrl = res.url;
                    vm.realPictureUrl = res.url;
                    $('#@guid-val').val(res.url);
                }, function () {

                });
            }
        }
    })
</script>
